import styles from "@pages/personal/styles/styles.module.less";
import GeekIcon from "@shared/geekIcon";
import { DatePicker } from "antd-mobile";
import { useEffect, useState } from "react";
import dayjs from "dayjs";
import { useUpdateProfileMutation } from "@service/user";
import Loading from "@shared/loading";
import toast from "react-hot-toast";

// import DatePicker from 'react-datepicker';
// import DayPicker from 'react-day-picker';
// import 'react-datepicker/dist/react-datepicker.css';

interface Props {
    birthday: string;
}

export default function Birthday({ birthday }: Props) {
    // 用于控制生日日期选择组件的渲染与销毁
    const [visible, setVisible] = useState(false);
    // 用于修改用户资料
    const [updateProfile, { isSuccess, isLoading }] = useUpdateProfileMutation();

    // 监听用户生日是否修改成功
    useEffect(() => {
        // 修改成功
        if (isSuccess) {
            // 用户提示
            toast.success("用户生日修改成功");
            // 销毁生日日期选择组件
            setVisible(false);
        }
    }, [isSuccess, setVisible]);
    return (
        <li>
            <span>生日</span>

            <div className={styles.value} onClick={() => setVisible(true)}>
                <span>{birthday || "未设置"}</span>
                <GeekIcon type="iconbtn_right" className={styles.icon} />
                {/* <DatePicker
                    title="选择生日"
                    visible={visible}
                    onClose={() => setVisible(false)}
                    defaultValue={dayjs(birthday).toDate()}
                    max={new Date()}
                    min={new Date(1900, 0, 1, 0, 0, 0)}
                    onConfirm={(date) =>
                        updateProfile({ birthday: dayjs(date).format("YYYY-MM-DD") })
                    }
                /> */}
            </div>

            {isLoading && <Loading />}
        </li>
    );
}
